<template>
  <div class="talent_details_main" :class="{'tdm_fixed': isFixed}">
    <div class="tdm_wrap" v-if="!isLoading">
      <div class="tdm_time">
        <div class="tdm_data">数据更新时间</div>
        <div class="tdm_date">{{ changeTime }}</div>
        <img class="tdm_time_img" src="@/assets/one/refreshIcon.png" @click="Refresh" />
      </div>
      <template v-if="!isLoading">
        <div class="tdm_info" :class="{'fixed':isFixed}" ref="headerBox">
          <div class="tdm_info_img" :class="{ playing: infoData.liveStatu == 1 }">
            <img
              v-if="infoData.isDelete != 2 && infoData.isDelete != 3"
              :src="infoData.logo"
              :onerror="defaultImg"
              @click="ImgPreview(infoData.logo)"
            />
            <img
              v-if="infoData.isDelete == 2 || infoData.isDelete == 3"
              src="@/assets/one/detail.jpg"
              class="avatorImg"
              @click="ImgPreview('@/assets/one/detail.jpg')"
            />
            <!-- <div class="playingIcon" v-if="infoData.liveStatu == 1"> -->
            <div class="liveAnimation" v-if="infoData.liveStatu == 1">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <!-- </div> -->
          </div>
          <div class="tdm_info_box">
            <div class="tdm_name">
              <span>{{ infoData.nickName }}</span>
              <!-- 是否开通橱窗 -->
              <img v-if="infoData.isShop == 1" class="tbm_img" src="@/assets/one/shop.png" alt />
              <!-- 是否直播中 -->
              <img v-if="infoData.liveStatu == 1" class="tbm_img" src="@/assets/one/live.png" alt />
              <div v-if="infoData.isDelete == 2" class="tdm_delete">已封号</div>
              <div v-if="infoData.isDelete == 3" class="tdm_delete">已注销</div>
            </div>
            <div class="tdm_douyinhao">抖音号: {{ infoData.uniqueId }}</div>
            <div class="tdm_renzheng">
              <!-- 认证类型 -->
              <img v-if="infoData.verifyType == 2" src="@/assets/one/search_result03.png" alt />
              <img v-if="infoData.verifyType == 1" src="@/assets/one/rzOrange.png" alt />
              <span class="tdm_rz_text">{{ infoData.verifyName }}</span>
            </div>
            <div class="tdm_basic">
              <div class="tdm_basic_item">
                <!-- 性别 -->
                <img v-if="infoData.gender == 1" src="@/assets/one/boy.png" alt />
                <img v-if="infoData.gender == 2" src="@/assets/one/girl.png" alt />
                <span>{{ infoData.age ? infoData.age : "--" }}岁</span>
              </div>
              <div class="tdm_basic_item">{{ infoData.category ? infoData.category : "--" }}</div>
              <div class="tdm_basic_item">{{ infoData.city ? infoData.city : "--" }}</div>
            </div>
            <div class="tdm_flxed_box">
              <div class="tdm_flxed_left">
                粉丝总数 :
                <span>{{format_num(infoData.totalFans)}}</span>
              </div>
              <div class="tdm_flxed_right" v-if="infoData.praiseLevel.length!=0">
                <div>带货口碑:</div>
                <div class="tdm_top tdm_top_pf">
                  {{
                  infoData.praiseLevel[0].publicPraise
                  ? infoData.praiseLevel[0].publicPraise
                  : "--"
                  }}
                  <span
                    class="tdm_pf3 tdm_pf"
                    v-if="infoData.praiseLevel[0].level == 1"
                  >高</span>
                  <span class="tdm_pf2 tdm_pf" v-if="infoData.praiseLevel[0].level == 2">中</span>
                  <span class="tdm_pf1 tdm_pf" v-if="infoData.praiseLevel[0].level == 3">低</span>
                </div>
              </div>
            </div>
          </div>
          <div class="tdm_collect" :class="{'disabled':uLevel == '0'}" v-if="infoData.isCollect == 0" @click="addStar()">
            <img src="@/assets/one/xingxing.png" /><span>收藏</span>
          </div>
          <div
            class="tdm_cancel_collect"
            v-if="infoData.isCollect == 1"
            @click="cancelStar(infoData)"
          >已收藏</div>
        </div>
        <div class="tdm_statistics" :style="{'padding-top':(isFixed?'1rem':'0') }">
          <div class="tdm_statistics_box">
            <div class="tdm_statistics_item">
              <div class="tdm_top">{{ format_num(infoData.totalFans) }}</div>
              <div class="tdm_btm">粉丝总数</div>
            </div>
            <div class="tdm_statistics_item">
              <div class="tdm_top">{{ format_num(infoData.totalFavorite) }}</div>
              <div class="tdm_btm">点赞总数</div>
            </div>
            <div class="tdm_statistics_item" v-if="infoData.praiseLevel.length!=0">
              <div class="tdm_top tdm_top_pf">
                {{
                infoData.praiseLevel[0].publicPraise
                ? infoData.praiseLevel[0].publicPraise
                : "--"
                }}
                <span
                  class="tdm_pf3 tdm_pf"
                  v-if="infoData.praiseLevel[0].level == 1"
                >高</span>
                <span class="tdm_pf2 tdm_pf" v-if="infoData.praiseLevel[0].level == 2">中</span>
                <span class="tdm_pf1 tdm_pf" v-if="infoData.praiseLevel[0].level == 3">低</span>
              </div>
              <div class="tdm_btm">带货口碑</div>
            </div>
          </div>
        </div>
      </template>
      <div class="tdm_line"></div>
      <!-- ============================== 以下是tabs切换结构 -==================== -->
      <div class="tdm_tabs_box">
        <van-tabs
          v-model="active"
          :offset-top="'2.29rem'"
          scrollspy
          sticky
          @scroll="tabScrollFn"
          :duration="0.1"
        >
          <van-tab title="直播详情">
            <talentLiveDetails :LiveShop="infoData.isShop" class="model_interval" />
          </van-tab>
          <van-tab title="带货分析">
            <talentGoodsDetails :LiveShop="infoData.isShop" class="model_interval" />
          </van-tab>
          <van-tab title="视频详情">
            <talentVideoDetails :LiveShop="infoData.isShop" class="model_interval" />
          </van-tab>
          <van-tab title="粉丝分析">
            <talentFansDetails :LiveShop="infoData.isShop" class="model_interval" />
          </van-tab>
        </van-tabs>
        <!-- 我是有底线的~ -->
        <FooterText />
      </div>
    </div>
    <goLiveScreenPage v-if="infoData.liveStatu == 1 && infoData.roomid" :id="infoData.roomid" />
    <van-dialog v-model:show="isShowPowerBox" show-cancel-button :className="'power_pop'" :show-confirm-button="false" :show-cancel-button="false">
      <div class="power_pop_box">
        <div class="power_content">
          <h3>会员权限不足</h3>
          <p>您当前收藏人数已达上限，<br>您可以进行取消收藏部分达人或进行升级会员操作</p>
          <div class="pc_btns" :class="uLevel != 2 && uLevel != 1 ? '' : 'isLevel2'">
            <span @click="goCollectPage">取消收藏</span>
            <span class="active" @click="popVipBox" v-if="uLevel != 2 && uLevel != 1">升级会员</span>
          </div>
        </div>
        <i class="power_close_btn" @click="isShowPowerBox = false"></i>
      </div>
    </van-dialog>
    <!-- <div class="flxed_open" @click="toLiveScreen"><span></span><span></span><span></span>实时直播大屏</div> -->
    <PageLoading v-if="isLoading" />
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import talentFansDetails from './talentFansDetails.vue';
import talentGoodsDetails from './talentGoodsDetails.vue';
import talentLiveDetails from './talentLiveDetails.vue';
import talentVideoDetails from './talentVideoDetails.vue';
// import drag from '@/component/drag.vue'
import goLiveScreenPage from '@/component/goLiveScreenPage';
import PageLoading from '@/component/pageLoading.vue';
import errorImg from '@/assets/img/superman.png'; //图片

export default {
  components: {
    talentFansDetails,
    talentGoodsDetails,
    talentLiveDetails,
    talentVideoDetails,
    goLiveScreenPage,
    PageLoading,
  },

  data() {
    return {
      changeTime: '',
      active: 0,
      infoData: {
        praiseLevel: []
      },
      tabIsfixed: false, //  tab是否吸顶
      isFixed: false,
      fixedVal: 0,
      isFristScroll: false, //是否出发过一次吸顶
      isLoading: true,
      errorImg: errorImg,
      isShowPowerBox:false, //是否展示弹框
      uLevel:0,
    };
  },
  props: {},
  watch: {
    $route: function (newval, oldval) {
      this.active = newval.path;
    }
  },
  computed: {
    // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  created() {
    this.uLevel = localStorage.getItem('vipLevel');
    // if(!this.$isZsjxApp){
    // }else{
    //   this.uLevel = this.$getCookie('vipLevel');
    // }
  },
  mounted() {
    this.gitInfoData();
    window.onscroll = e => {
      this.setHeaderFixed();
    };
  },
  methods: {
    initVipLevel(level){  //初始化vip等级排序，方便比较大小
      let aLevel = '';
      if(level == 3){
        aLevel = 0;
      }else if(level == 4){
        aLevel = 1;
      }else if(level == 5){
        aLevel = 2;
      }else if(level == 1){
        aLevel = 3;
      }else if(level == 2){
        aLevel = 4;
      }
      return aLevel;
    },
    upLevel(level){  //获取比当前等级大一级的vip级别
      let aLevel = '';
      if(level == 0 || level == 3){
        aLevel = 4;
      }else if(level == 4 || level == 5){ //vip和svip个人版触发权限判断时，都跳到svip，
        aLevel = 1;
      }else if(level == 1 || level == 2){
        aLevel = 2;
      }
      return aLevel;
    },
    popVipBox(){  //收藏权限弹框 点击升级会员逻辑
      let that = this;
      let minLevel = this.upLevel(this.uLevel);
      this.isShowPowerBox = false;
      if(!this.$isZsjxApp){  //跳h5收藏页，如果客户端内打开跳客户端收藏页面
        // this.$toast('权限不足，请升级会员');
        this.$popVip({
          show: true,
          obj: that.$router,
          minLeve: minLevel
        });
      }else{
        if(this.$OSType == 'ios'){  //调用ios弹框方法
          window.webkit.messageHandlers.showVipPop.postMessage(JSON.stringify(minLevel));
        }else{ //调用安卓弹框方法
          console.log(window.appBridgeObj.showVipPop);
          window.appBridgeObj.showVipPop(JSON.stringify(minLevel));
        }
      }   
    },
    goCollectPage(){  //收藏权限弹框的 点击取消收藏逻辑
      this.isShowPowerBox = false;
      if(!this.$isZsjxApp){  //跳h5收藏页，如果客户端内打开跳客户端收藏页面
        this.$router.push('/myStar');
      }else{
        if(this.$OSType == 'ios'){  //调用跳转方法
          window.webkit.messageHandlers.JumpTo.postMessage('UserCollection');
        }else{ //调用安卓弹框方法
          window.appBridgeObj.JumpTo('UserCollection');
        }
      }
    },
    //获取tab置顶的参数
    tabScrollFn(callbackPms) {
      // console.log(callbackPms)
      this.tabIsfixed = callbackPms.isFixed;
    },

    //设置顶部浮动
    setHeaderFixed() {
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      // let elHeight = headerBoxEl.offsetHeight;
      // let windowHeight = window.screen.height;
      // let documentHeight = document.body.offsetHeight || document.body.clientHeight;
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      // if(scrollTop >= this.fixedVal && documentHeight > (windowHeight + elHeight)){
      if (scrollTop >= this.fixedVal) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },

    // 请求页面数据
    gitInfoData() {
      this.isLoading = true;
      this.$axios
        .get('/api/Author/GetAuthorDetailInfo', {
          params: {
            authorId: this.$route.query.id,
            'api-version': 2
          }
        })
        .then(res => {
          this.isLoading = false;
          if (res.data && res.data.code == 0) {
            this.infoData = res.data.data;
            let date = Math.round(new Date() / 1000);
            this.changeTime = this.timestamp(date, 'Y-M-D h:m:s');
            this.isCollect = res.data.data.isCollect;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 刷新
    Refresh() {
      this.infoData = [];
      this.gitInfoData();
    },
    // 收藏
    addStar() {
      if(this.uLevel == '0'){
        this.$toast({className:'collent_toast',message:'当前权限不足，请升级会员后使用'});
        return;
      }
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: this.$route.query.id,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data && res.data.code == 0) {
            that.infoData.isCollect = 1;
            this.$toast.success('收藏成功');
            // this.$message({
            //   message: "收藏成功",
            //   duration: 2000,
            //   type: "success",
            //   offset: 154
            // });
          }else if(res.data.code == 1003){
            this.isShowPowerBox = true;
            // this.$toast('权限不足，请升级会员');
            // this.$popVip({
            //   show: true,
            //   obj: that.$router,
            //   // minLeve: that.minLeve
            // });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏
    cancelStar() {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: this.$route.query.id,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data && res.data.code == 0) {
            that.infoData.isCollect = 0;
            this.$toast.success('已取消收藏');
            // this.$message({
            //   message: "已取消收藏",
            //   duration: 2000,
            //   type: "success",
            //   offset: 154
            // });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳转直播大屏
    toLiveScreen() {
      this.$router.push({
        path: '/liveBigScreenMain',
        query: { id: this.infoData.roomid }
      });
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  },
  destroyed() {
    window.onscroll = '';
  }
};
</script>

<style lang="less" scoped>
.model_interval {
  padding-top: 0.01rem !important;
}
.flxed_open {
  position: fixed;
  top: 1.6rem;
  right: 0;
  border-radius: 0.4267rem 0rem 0rem 0.4267rem;
  background: rgba(5, 18, 42, 0.7);
  padding: 0 0.2933rem;
  width: 3.4667rem;
  box-sizing: border-box;
  line-height: 0.8533rem;
  font-size: 0.3733rem;
  color: #fff;
  span {
    position: relative;
    top: 0.0533rem;
    border-radius: 4px;
    display: inline-block;
    width: 0.07rem;
    height: 0.32rem;
    background: #ff025d;
    margin-right: 0.08rem;
  }
  span:nth-of-type(2) {
    height: 0.45rem;
    background: #ff167c;
  }
  span:nth-of-type(3) {
    height: 0.24rem;
    background: #ff2ea0;
    margin-right: 0.1867rem;
  }
}
.talent_details_main {
  margin-top: 0.4rem;
  background: #f1f1f1;
  .tdm_wrap {
    background: #fff;
    margin-bottom: 0.2rem;
    /deep/.van-tabs__line {
      width: 1.4rem;
      background-color: #fd7f2c;
    }
    .loading {
      margin: 1.066667rem;
    }
  }
}
.tdm_fixed {
  margin-top: 1.733333rem;
}

.tdm_time {
  margin: 0 auto;
  width: 9.2rem;
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #f5f5f5;
  border-radius: 0.133333rem;
  border: solid 1px #e5e5e5;
  margin-bottom: 0.4rem;
  display: flex;
  position: relative;
  top: 0.106rem;
  .tdm_data {
    font-size: 0.346667rem;
    color: #888888;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }
  .tdm_date {
    font-size: 0.373333rem;
    font-family: DINPro-Medium;
    color: #222222;
  }
  .tdm_time_img {
    position: absolute;
    left: 7.52rem;
    top: 0.24rem;
    width: 0.386667rem;
    height: 0.386667rem;
    // background-color: #1779ff;
  }
}
.tdm_info {
  display: flex;
  padding: 0 0.4rem;
  margin-top: 0.4rem;
  position: relative;
  transition: all linear 100ms;
  .tdm_info_img {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 94%;
      height: 94%;
      border-radius: 50%;
    }
    .playingIcon {
      width: 0.48rem;
      height: 0.48rem;
      background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 0.106667rem;
      position: absolute;
      top: 1.146667rem;
      left: 1.04rem;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;

      .playingText {
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
  .playing {
    background-image: url('~@/assets/one/avatorBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .tdm_info_box {
    margin-left: 0.266667rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .tdm_name {
      display: flex;
      align-items: center;
      font-size: 0.426667rem;
      color: #222222;
      font-weight: 600;
      span {
        max-width: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tbm_img {
        width: 0.346667rem;
        height: 0.346667rem;
        margin-left: 0.133333rem;
      }
      .tdm_delete {
        width: 1.253333rem;
        height: 0.613333rem;
        line-height: 0.613333rem;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 12px;
        border: solid 1px #e5e5e5;
        font-size: 0.16rem;
        color: #222222;
        margin-left: 0.133333rem;
        color: #555;
      }
    }
  }
  .tdm_douyinhao {
    font-size: 0.346667rem;
    color: #888888;
    margin-top: 0.133333rem;
  }
  .tdm_renzheng {
    font-size: 0.346667rem;
    color: #888888;
    display: flex;
    align-items: center;
    margin-top: 0.133333rem;
    img {
      width: 0.32rem;
      height: 0.32rem;
    }
    .tdm_rz_text {
      margin-left: 0.053333rem;
      display: inline-block;
      width: 3.6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .tdm_basic {
    display: flex;
    .tdm_basic_item {
      height: 0.613333rem;
      line-height: 0.613333rem;
      padding: 0 0.186667rem;
      font-size: 0.32rem;
      color: #555555;
      background-color: #fff7ed;
      border-radius: 4px;
      margin-right: 0.133333rem;
      box-sizing: border-box;
      max-width: 1.68rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 0.106667rem;
      img {
        width: 0.293333rem;
        height: 0.293333rem;
      }
    }
  }
  .tdm_flxed_box {
    display: none;
  }
  .tdm_collect {
    position: absolute;
    right: 0.4rem;
    top: 0.293333rem;
    width: 1.866667rem;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.133333rem;
    background-color: #fd7f2c;
    font-size: 0.346667rem;
    color: #fff;
    img {
      width: 0.32rem;
      height: 0.32rem;
      margin-right: 0.053333rem;
    }
    &.disabled{
      background-color: #ffb280;
    }
  }
  .tdm_cancel_collect {
    position: absolute;
    right: 0.4rem;
    top: 0.293333rem;
    width: 1.866667rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
  }
  &.fixed {
    position: fixed;
    top: 0;
    width: 10rem;
    margin-top: 0;
    padding: 0.4rem;
    z-index: 20;
    background-color: #fff;
    height: 2.4rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    &:after {
      content: '';
      position: absolute;
      bottom: 0.173333rem;
      left: 0;
      width: 100%;
      height: 0.186667rem;
      background-color: #f1f1f1;
    }
    .tdm_info_img {
      width: 1.013333rem;
      height: 1.013333rem;
    }
    .playingIcon {
      width: 0.32rem;
      height: 0.32rem;
      top: 0.693333rem;
      left: 0.64rem;
      span:last-child {
        display: none;
      }
    }
    .tdm_douyinhao {
      display: none;
    }
    .tdm_basic {
      display: none;
    }
    .tdm_collect {
      display: none;
    }
    .tdm_cancel_collect {
      display: none;
    }
    .tdm_flxed_box {
      display: block;
      display: flex;
      .tdm_flxed_left {
        font-size: 0.346667rem;
        color: #888888;
        span {
          margin-left: 0.106667rem;
        }
      }
      .tdm_flxed_right {
        margin-left: 0.666667rem;
        font-size: 0.346667rem;
        color: #888888;
        display: flex;
        align-items: center;
      }
    }
    .tdm_top_pf {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0.106667rem;
      .tdm_pf1 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0.053333rem;

        background-color: #eaebf3;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #4f5058;
      }
      .tdm_pf2 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        margin-left: 0.053333rem;
        text-align: center;
        background-color: #fff7ed;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #fd7f2c;
      }
      .tdm_pf3 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        margin-left: 0.053333rem;
        text-align: center;
        background-color: #fde6e9;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #ea4759;
      }
      .tdm_pf {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .tdm_btm {
      font-size: 0.32rem;
      color: #888888;
      text-align: center;
    }
    .tdm_renzheng {
      display: none;
    }
  }
}
.tdm_statistics {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0 0.4rem;
  box-sizing: border-box;

  .tdm_statistics_box {
    width: 100%;
    height: 2.24rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e5e5e5;
    .tdm_top {
      font-size: 0.453333rem;
      color: #222222;
      text-align: center;
      // font-family: 'Dinpro-medium';
      font-family: Dinpro-medium;
    }
    .tdm_top_pf {
      display: flex;
      align-items: center;
      justify-content: center;

      .tdm_pf1 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.053333rem;
        background-color: #eaebf3;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #4f5058;
      }
      .tdm_pf2 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.053333rem;
        background-color: #fff7ed;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #fd7f2c;
      }
      .tdm_pf3 {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.053333rem;
        background-color: #fde6e9;
        border-radius: 0.053333rem;
        font-size: 0.266667rem;
        color: #ea4759;
      }
      .tdm_pf {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .tdm_btm {
      font-size: 0.32rem;
      color: #888888;
      text-align: center;
    }
    .tdm_statistics_item {
      width: 34%;
    }
  }
}
.tdm_line {
  width: 100%;
  height: 0.186667rem;
  background-color: #f1f1f1;
}
.tdm_tabs_box {
  position: relative;
  .tdm_tab_line {
    width: 100%;
    height: 0.013333rem;
    position: absolute;
    top: 42px;
    right: 0;
    background-color: #e5e5e5;
  }
  /deep/.van-tab {
    font-size: 0.4rem;
    color: #888888;
    border-bottom: 1px solid #e5e5e5;
  }
  /deep/.van-tab--active {
    font-size: 0.4rem !important;
    font-weight: 600;
    color: #222222 !important;
  }
  /deep/.van-tabs__wrap {
    height: 1.17rem;
  }
  /deep/.van-tab__text--ellipsis {
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.power_pop{
  width: 8rem;
  overflow: initial;
  .power_pop_box{
    padding: .6133rem 0 .64rem;
  }
  .power_content{
    text-align: center;
    h3{
      font-size: .4533rem;
      color: #333;
    }
    p{
      font-size: .4rem;
      padding: 0 1.2rem;
      color: #666;
      line-height: .85rem;
      margin-top: .45rem;
    }
    .pc_btns{
      padding: 0 .6667rem;
      margin-top: .5867rem;
      display: flex;
      justify-content: space-between;
      &.isLevel2{
        justify-content: center;
      }
      span{
        display: inline-block;
        box-sizing: border-box;
        width: 3.0667rem;
        height: 1.1333rem;
        line-height: 1.1333rem;
        text-align: center;
        color: #fd7f2c;
        border: solid 1px #fd7f2c;
        border-radius: .1333rem;
        &.active{
          background-color: #fd7f2c;
          color: #fff;
        }
      }
    }
  }
  .power_close_btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.2rem;
    display: inline-block;
    width: .64rem;
    height: .64rem;
    background:url('~@/assets/img/give_close.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
/deep/ a:hover {
  /* color: #cd0200; */
  text-decoration: none !important;
}
</style>
